<template>
	<view class="xm20-25">
		
		  
		<view class="order xp24-32 xbs ">
			
			<view class="">
				<view class="xflex-x-between xmt32">
					<view class="xflex-x">
						<image class="addicon" src="/static/image/mine/address.png" mode=""></image>
						<view class="addname">
							北京海定中关村附近
						</view>
						
					</view>
					<view class="xflex-x-center">
						<view class="addxg">
							修改订单
						</view>
						<image class="jt" src="/static/image/mine/jt.png" mode=""></image>
					</view>
				</view>
				
				
				<view class="xmt20">
					<view class="time">
						11月25日 - 11月30日<span class="xml32">1晚</span>
					</view>
					<view class="info ">
						1间 · 2成人 · 1儿童
					</view>
				</view>
				
				
				
			</view>
			
			
		</view>
		
		
		
		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x">
				<view class="tipsa">
					
				</view>
				<view class="titles">
					盲盒酒店
				</view>
			</view>
			<view class="hote">
				<view class="hote-item xflex-x xpt24 xpb24">
					<view class="hote-imgs pr xmr12">
						
						<image class="hote-img pa " src="" mode=""></image>
						<view class="hote-time pa">
							360秒
						</view>
						
					</view>
					<view class="xflex1">
						<view class="hote-title">
							豪华大饭店
						</view>
						<view class="xmt12">
							<u-rate :count="4" active-color="#F89D25" v-model="value"></u-rate>
						</view>
						
						<view class="xflex-x xmt12">
							<view class="hote-span xmr10">
								4.6/超赞
							</view>
							<view class="hote-span">
								4.6/超赞
							</view>
							
						</view>
						
						<view class="hote-breakfast">
							无窗户  |  无早餐
						</view>
						
						
						<view class="xflex-x-between">
							<view class="xflex-x">
								<image class="hote-address" src="../../..//static/image/mine/address.png" mode=""></image>
								<view class="hote-breakfast">
									距目的地100m
								</view>
							</view>
							<view class="hote-ads">
								查看酒店>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x xmb40">
				<view class="lab">
					订单编号：
				</view>
				<view class="xflex-x">
					<view class="value">
						2324124232424
					</view>
					<view class="copy xml10" @click="copy()">
						复制
					</view>
				</view>
			</view>
			
			<view class="xflex-x">
				<view class="lab">
					下单时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						2024-08-12 20:18:25
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.top{
		padding-bottom: 27rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
	}
	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #198FFF;
	}
	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}
	
	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}
	
	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}
	
	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;
		
	}
	
	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}
	
	.star {

		// background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}
	
	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	
	.lab {
		font-weight: bold;
		font-size: 24rpx;
		color: #7C7C7C;
		width: 160rpx;
	}
	
	.value {
		font-weight: bold;
		font-size: 24rpx;
		color: #272727;
	}
	.copy {
		font-weight: bold;
		font-size: 22rpx;
		color: #333333;
		width: 70rpx;
		height: 36rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;
	}
	.jz {
		width: 36rpx;
		height: 36rpx;
	}
	
	.jzw {
		font-weight: bold;
		font-size: 40rpx;
		color: #40D204;
	}
	
	.hote {
		
		&-title {
			width: 157rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
		}
		&-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #198EFF;
		}
		
		&-imgs {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}
		
		&-time {
			width: 180rpx;
			height: 40rpx;
			background: rgba(0,0,0,0.4);
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			bottom: 8rpx;
			left: 10rpx;
		}
		
		&-span {
		
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
			background: #EEEEEE;
			border-radius: 6rpx;
			padding: 7rpx 13rpx;
		}
		
		&-breakfast {
			width: 100%;
			text-align: right;
			
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 48rpx;
		}
		&-address {
			width: 28rpx;
			height: 28rpx;
		}
		&-ads {
		
			font-weight: 500;
			font-size: 24rpx;
			color: #198FFF;
		}
	}
	
	
	.tipsa {
		width: 6rpx;
		height: 32rpx;
		margin-right: 6rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
	}
	.titles{
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}

</style>
